import React, { useEffect, useState } from "react";
import { Input, Checkbox, Button } from "antd";
import { getMessageCode } from "@/api";
import { message } from "antd";

export default function (props: any) {
	const { onHideFooter, setShowFormModal } = props;
	const [form, setForm] = useState<any>({});
	const [seconds, setSeconds] = useState(60);
	const [isSend, setIsSend] = useState(false);
	// const [isAbleStore, setIsAbleStore] = useState(false);
	// useEffect(() => {
	// 	setIsAbleStore(form.companyName && form.userName && form.phone && form.messageCode && form.checked);
	// }, [form]);
	const handleForm = (value: any, type: string) => {
		const newForm = {
			...form,
			[type]: value,
		};
		setForm(newForm);
	};
	const handleGetCode = () => {
		return;
		if (isSend) return;
		if (!/^1[3-9]\d{9}$/.test(form.phone)) {
			message.error("请输入正确的手机号");
			return;
		}
		getMessageCode({
			phone: form.phone,
		}).then((res: any) => {
			if (res.success) {
				message.success("验证码发送成功");
				setIsSend(true);
				const _interval = setInterval(() => {
					if (seconds < 1) {
						setIsSend(false);
						setSeconds(60);
						clearInterval(_interval);
					} else {
						setSeconds((n) => {
							return n - 1;
						});
					}
				}, 1000);
			}
		});
	};
	const handleStore = () => { };
	const handleClickFooter = () => {
		setShowFormModal && setShowFormModal();
	};
	return (
		<div className='footer'>
			<div className='footer-wrapper'>
				<div className='footer-header'>
					<div className='consult-text'>
						<img src={require("@/assets/imgs/icon-store.png")} alt='' />
						<span>开店咨询</span>
					</div>
					<div className='deal'>
						<Checkbox className='checkbox-wrapper'>
							<div className='check-text'>
								我已阅读并同意<span><a
									href='https://rule.alibaba.com/rule/detail/11000427.htm?spm=a27am.13680033.0.0.7ee9aeb6bmdIxG'
									target='_blank'>
									《隐私权政策》
								</a></span>
							</div>
						</Checkbox>
						<img
							src={require("@/assets/imgs/icon-close.png")}
							onClick={(e) => {
								e.stopPropagation();
								onHideFooter(false);
								localStorage.setItem("hideFooter", "1");
							}}
							alt=''
							className='btn-close'
						/>
					</div>
				</div>
				<div className='footer-content' onClick={handleClickFooter}>
					<Input placeholder='公司名称' onChange={(e) => handleForm(e.target.value, "companyName")}></Input>
					<div className='gap'></div>
					<Input placeholder='姓名' onChange={(e) => handleForm(e.target.value, "userName")}></Input>
					<div className='gap'></div>
					<Input placeholder='手机号码' onChange={(e: any) => handleForm(e.target.value, "phone")}></Input>
					<div className='gap'></div>
					<div className='wrapper-input'>
						<Input
							placeholder='验证码'
							onChange={(e: any) => handleForm(e.target.value, "messageCode")}></Input>
						<span className='btn-get-messageCode' onClick={handleGetCode}>
							{isSend ? seconds + "s" : "获取验证码"}
						</span>
					</div>
					<div className='gap'></div>
					<Button className='btn-store' type='primary' onClick={handleStore}>
						开店咨询
					</Button>
				</div>
			</div>
		</div>
	);
}
